<template>
  <div>
    <common-search ref="SearchData" title-name="客户姓名"></common-search>
    <el-main>
      <el-table :data="tableData.records">
        <el-table-column label="头像" width="240">
          <template slot-scope="scope">
            <el-avatar icon="el-icon-user-solid" shape="square" :src="scope.row.profilePhoto" :key="scope.row.profilePhoto"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="gameMoney" label="钱包余额＄" width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click.native.prevent="updateById(scope.row)"></el-button>
            <el-dialog title="用户信息" :visible.sync="dialogFormVisible" close-on-press-escape :before-close="clearUpdateData">
              <el-form :model="clientele">
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                  <el-input v-model="clientele.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="钱包金额＄" :label-width="formLabelWidth">
                  <el-input v-model="clientele.gameMoney" autocomplete="off" type="number"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
              <el-button @click="clearUpdateData">取 消</el-button>
              <el-button type="primary" @click="updateClienteleGameMoney">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <common-footer :pageData="tableData" ref="footData"></common-footer>
  </div>
</template>

<script>
import CommonSearch from '@/components/CommonSearch.vue';
import CommonFooter from '@/components/CommonFooter.vue';
import axios from 'axios';
    export default {
        name:'ClientPerson',
        props:["page","pageSize"],
        components:{CommonSearch,CommonFooter},
        data() {
            return{
                tableData:{},
                searchD:'',
                formLabelWidth: '120px',
                dialogFormVisible:false,//控制修改页开关
                clientele:{
                  id:'',
                  name:'',
                  password:'',
                  gameMoney:'',
                  profilePhoto:'',
                }
            }
        },
        mounted() {
          this.$refs.SearchData.$on('searchData',this.getClienteleByName)
          this.$refs.footData.$on('pageSize',this.getPageSize);//接收子组件分页栏的每页显示条目数
          this.$refs.footData.$on('currentPage',this.getCurrentPage);//接收子组件分页栏的数据
          axios.get(`/clientele/getPage?page=${this.page}&pageSize=${this.pageSize}`).then(
              response=>{
                  this.tableData=response.data.data
                  },
              error=>{
                  console.log("请求失败。原因是",error.message);
              }
          );
        },
        methods:{
          getClienteleByName(name){//得到模糊搜索的关键字，如果在第一页，则直接调用搜索请求，如果不在第一页，则修改为第一页，监控属性会自动监控到data数据发生变化并调用请求
            this.searchD=name;
            if(this.tableData.current===1){
              this.updataPageData();
            }else{
              this.tableData.current=1;
            }
          },
          getPageSize(pagesize){//修改每页数据个数，监控属性监控到自动调用请求查询
            this.tableData.size=pagesize;
          },
          getCurrentPage(currentpage){//修改当前页，监控属性监控到自动调用请求查询
            this.tableData.current=currentpage;
          },
          updataPageData(){//发送请求分页模糊查询，适用于更新完数据后刷新页面或者翻页，修改每页个数，查询等操作
            axios.get(`/clientele/getPage?page=${this.tableData.current}&pageSize=${this.tableData.size}&name=${this.searchD}`).then(
            response=>{
              this.tableData=response.data.data;
              this.clientele={
                id:'',
                name:'',
                password:'',
                gameMoney:'',
                profilePhoto:'',
              }
            },
            error=>{
              console.log("请求失败。原因是",error.message);
            });
          },
          updateById(val){//进入修改页面
            this.dialogFormVisible = true;//开启信息页面
            this.clientele.id=val.id;
            this.clientele.name=val.name;
            this.clientele.password=val.password;
            this.clientele.gameMoney=val.gameMoney;
            this.clientele.profilePhoto=val.profilePhoto;
          },
          updateClienteleGameMoney(){//修改用户钱包金额
            this.dialogFormVisible=false;
            axios(
              {
                method:'post',
                url:'/clientele/updateClientele',
                data:this.clientele,
              }
            ).then(
              response=>{
                if(response.data.data===true){
                  alert('修改用户金额成功');
                  this.updataPageData();
                }else{
                  alert('修改失败');
                  this.clientele={
                    id:'',
                    name:'',
                    password:'',
                    gameMoney:'',
                    profilePhoto:'',
                  }
                }
              }
            );
          },
          clearUpdateData(){//关闭对话框时清空表单数据
            this.dialogFormVisible = false;
            this.clientele={
              id:'',
              name:'',
              password:'',
              gameMoney:'',
              profilePhoto:'',
            };
          }
        },
        watch:{
        'tableData.size':{
            handler(newValue,oldValue){
              if(oldValue!==undefined){
                this.updataPageData();
              }
            }
        },
        'tableData.current':{
            handler(newValue,oldValue){
              if(oldValue!==undefined){
                this.updataPageData();
              }
            }
        }
      }
    }

</script>

<style>

</style>